<template>
  <el-dialog
    title="题库管理"
    width="80%"
    :before-close="handleClose"
    destroy-on-close
  >
    <el-tabs v-model="activeTab" class="mb-3">
      <el-tab-pane label="单选题" name="single-choice">
        <div class="d-flex justify-content-between mb-3">
          <el-input
            v-model="searchQuerySingle"
            placeholder="搜索题目..."
            style="width: 300px"
          >
            <template #append>
              <el-button :icon="Search"></el-button>
            </template>
          </el-input>
          <el-button type="primary" @click="addQuestion('single')">
            <el-icon>
              <Plus />
            </el-icon>
            添加题目
          </el-button>
        </div>
        <div class="question-preview">
          <el-card
            v-for="(question, index) in singleChoiceQuestions"
            :key="index"
            class="mb-3"
          >
            <template #header>
              <div
                class="card-header d-flex justify-content-between align-items-center"
              >
                <h6>{{ index + 1 }}. {{ question.title }}</h6>
                <div>
                  <el-button
                    size="small"
                    @click="editQuestion('single', index)"
                  >
                    <el-icon>
                      <Edit />
                    </el-icon>
                  </el-button>
                  <el-button
                    size="small"
                    type="danger"
                    @click="deleteQuestion('single', index)"
                  >
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </div>
              </div>
            </template>
            <div class="mt-2">
              <el-radio-group v-model="question.answer" disabled>
                <el-radio
                  v-for="(option, optIndex) in question.options"
                  :key="optIndex"
                  :label="option.label"
                >
                  {{ option.text }}
                </el-radio>
              </el-radio-group>
            </div>
            <div class="mt-2 text-muted small">
              <el-tag size="small" class="me-2"
                >难度：{{ question.difficulty }}
              </el-tag>
              <el-tag size="small">分类：{{ question.category }}</el-tag>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="多选题" name="multiple-choice">
        <div class="d-flex justify-content-between mb-3">
          <el-input
            v-model="searchQueryMultiple"
            placeholder="搜索题目..."
            style="width: 300px"
          >
            <template #append>
              <el-button :icon="Search"></el-button>
            </template>
          </el-input>
          <el-button type="primary" @click="addQuestion('multiple')">
            <el-icon>
              <Plus />
            </el-icon>
            添加题目
          </el-button>
        </div>
        <div class="question-preview">
          <el-card
            v-for="(question, index) in multipleChoiceQuestions"
            :key="index"
            class="mb-3"
          >
            <template #header>
              <div
                class="card-header d-flex justify-content-between align-items-center"
              >
                <h6>{{ index + 1 }}. {{ question.title }}</h6>
                <div>
                  <el-button
                    size="small"
                    @click="editQuestion('multiple', index)"
                  >
                    <el-icon>
                      <Edit />
                    </el-icon>
                  </el-button>
                  <el-button
                    size="small"
                    type="danger"
                    @click="deleteQuestion('multiple', index)"
                  >
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </div>
              </div>
            </template>
            <div class="mt-2">
              <el-checkbox-group v-model="question.answer" disabled>
                <el-checkbox
                  v-for="(option, optIndex) in question.options"
                  :key="optIndex"
                  :label="option.label"
                >
                  {{ option.text }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="mt-2 text-muted small">
              <el-tag size="small" class="me-2"
                >难度：{{ question.difficulty }}
              </el-tag>
              <el-tag size="small">分类：{{ question.category }}</el-tag>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="简答题" name="essay">
        <div class="d-flex justify-content-between mb-3">
          <el-input
            v-model="searchQueryEssay"
            placeholder="搜索题目..."
            style="width: 300px"
          >
            <template #append>
              <el-button :icon="Search"></el-button>
            </template>
          </el-input>
          <el-button type="primary" @click="addQuestion('essay')">
            <el-icon>
              <Plus />
            </el-icon>
            添加题目
          </el-button>
        </div>
        <div class="question-preview">
          <el-card
            v-for="(question, index) in essayQuestions"
            :key="index"
            class="mb-3"
          >
            <template #header>
              <div
                class="card-header d-flex justify-content-between align-items-center"
              >
                <h6>{{ index + 1 }}. {{ question.title }}</h6>
                <div>
                  <el-button size="small" @click="editQuestion('essay', index)">
                    <el-icon>
                      <Edit />
                    </el-icon>
                  </el-button>
                  <el-button
                    size="small"
                    type="danger"
                    @click="deleteQuestion('essay', index)"
                  >
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </div>
              </div>
            </template>
            <div class="mt-2">
              <p class="text-muted small">参考答案：{{ question.answer }}</p>
            </div>
            <div class="mt-2 text-muted small">
              <el-tag size="small" class="me-2"
                >难度：{{ question.difficulty }}
              </el-tag>
              <el-tag size="small">分类：{{ question.category }}</el-tag>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search, Plus, Edit, Delete } from "@element-plus/icons-vue";
import { modalControllers } from "@/stores/modalController.js";
import { storeToRefs } from "pinia";

const modalController = modalControllers();
const { questionBankModal } = storeToRefs(modalController);
const dialogVisible = ref(questionBankModal.value);
const activeTab = ref("single-choice");

const searchQuerySingle = ref("");
const searchQueryMultiple = ref("");
const searchQueryEssay = ref("");

const singleChoiceQuestions = reactive([
  {
    title: "静脉输液前核对医嘱的目的是什么？",
    options: [
      { label: "A", text: "确保输液速度正确" },
      { label: "B", text: "确保给药安全，防止错误" },
      { label: "C", text: "了解患者病情" },
      { label: "D", text: "评估患者静脉条件" },
    ],
    answer: "B",
    difficulty: "中等",
    category: "静脉输液",
  },
  {
    title: "下列哪项不是静脉输液的适应症？",
    options: [
      { label: "A", text: "补充水分和电解质" },
      { label: "B", text: "纠正酸碱平衡失调" },
      { label: "C", text: "轻度脱水患者" },
      { label: "D", text: "静脉给药" },
    ],
    answer: "C",
    difficulty: "简单",
    category: "静脉输液",
  },
]);
const multipleChoiceQuestions = reactive([
  {
    title: "静脉输液过程中可能出现的并发症包括：",
    options: [
      { label: "A", text: "液体外渗" },
      { label: "B", text: "空气栓塞" },
      { label: "C", text: "静脉炎" },
      { label: "D", text: "肌肉萎缩" },
    ],
    answer: ["A", "B", "C"],
    difficulty: "中等",
    category: "静脉输液",
  },
]);
const essayQuestions = reactive([
  {
    title: "简述静脉输液的操作步骤和注意事项",
    answer:
      "静脉输液的操作步骤包括：1. 核对医嘱；2. 准备物品；3. 核对患者信息；4. 评估静脉条件；5. 选择穿刺部位；6. 穿刺建立静脉通路；7. 调节滴速；8. 固定针头和输液管路；9. 观察患者反应；10. 记录。注意事项包括：严格无菌操作、密切观察患者反应、定期检查输液速度和部位情况等。",
    difficulty: "较难",
    category: "静脉输液",
  },
]);

const open = () => {
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
};

const addQuestion = (type) => {
  ElMessage.info(
    `添加${type === "single" ? "单选" : type === "multiple" ? "多选" : "简答"}题功能待实现`,
  );
  // 实际应用中会打开一个新的模态框或路由到新页面进行题目添加
};

const editQuestion = (type, index) => {
  ElMessage.info(
    `编辑${type === "single" ? "单选" : type === "multiple" ? "多选" : "简答"}题，索引：${index} 功能待实现`,
  );
  // 实际应用中会打开一个新的模态框或路由到新页面进行题目编辑
};

const deleteQuestion = (type, index) => {
  ElMessageBox.confirm("此操作将永久删除该题目, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      if (type === "single") {
        singleChoiceQuestions.splice(index, 1);
      } else if (type === "multiple") {
        multipleChoiceQuestions.splice(index, 1);
      } else if (type === "essay") {
        essayQuestions.splice(index, 1);
      }
      ElMessage.success("删除成功!");
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

defineExpose({
  open,
});
</script>

<style scoped>
.d-flex {
  display: flex;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.mb-3 {
  margin-bottom: 1rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.me-2 {
  margin-right: 0.5rem;
}

.small {
  font-size: 0.875em;
}

.text-muted {
  color: #6c757d;
}

.card-header {
  padding: 10px 15px;
  border-bottom: 1px solid #ebeef5;
}
</style>
